<template>
  <!-- <div class="homeView"> -->
  <el-container>
    <el-header style="height: 80px">
      <div class="nav">
        <div class="nav_left">
          <img v-if="canClickLogo" :src="require('@/assets/img/home/' + $config.homeLogoPath)" alt=""
            @click="$router.push('/caseorder')"
            :style="{ cursor: 'pointer', position: 'relative', right: $config.homeLogo_right }" />
          <img v-else :src="require('@/assets/img/home/' + $config.homeLogoPath)" alt=""
            :style="{ cursor: 'pointer', position: 'relative', right: $config.homeLogo_right }" />
          <div v-if="!expand" style="font-size: 28px; cursor: pointer" @click="isExpand = !isExpand">
            <el-tooltip class="item" effect="dark" :content="isExpand ? $t('home.home34') : $t('home.home35')"
              placement="top">
              <i class="el-icon-s-grid"></i>
            </el-tooltip>
          </div>

          <el-form v-if="user_superAdmin != 1" class="nav_origination">
            <el-form-item label style="margin-top: 15px">
              <div v-if="!expand" class="search-tool">
                <el-select v-model="form.origination" :popper-append-to-body="false" class="select-style"
                  :placeholder="$t('home.home1')" @change="selectChange">
                  <template #prefix>
                    <span style="width: 36px; height: 36px">
                      <span v-show="!currentDept.attachedFile">
                        <img v-if="organizedType == 1" style="width: 36px; height: 36px"
                          src="@/assets/img/home/jt-zhensuo.png" alt />
                        <img v-else style="width: 36px; height: 36px" src="@/assets/img/home/jt-jigongsuo.png" alt />
                      </span>

                      <span v-show="currentDept.attachedFile">
                        <img style="width: 36px; height: 36px" :src="currentDept.attachedFile" alt />
                      </span>
                    </span>
                  </template>
                  <el-option v-for="(item, index) in optionLabelList" :key="index" :label="item.name" :value="item.id"
                    style="display: flex">
                    <span style="float: left" v-show="!item.attachedFile">
                      <img v-if="item.organizedType == '1'" style="width: 36px; height: 36px"
                        src="@/assets/img/home/jt-zhensuo.png" alt />
                      <img v-if="item.organizedType == '2'" style="width: 36px; height: 36px"
                        src="@/assets/img/home/jt-jigongsuo.png" alt />
                    </span>

                    <span v-show="item.attachedFile">
                      <img style="width: 36px; height: 36px" :src="item.attachedFile" alt />
                    </span>

                    <!-- {{ item.hasMsg }} -->
                    <div class="s-name" style="padding-left: 6px; display: inline-block">
                      {{ item.name }}
                    </div>
                    <div v-if="item.hasMsg" class="s-dian" style="
                        width: 8px;
                        height: 8px;
                        background: red;
                        border-radius: 50%;
                        margin-top: 6px;
                      "></div>
                    <!-- <span style="float: left">{{ item.label }}</span>
                    <el-checkbox style="float: right;"></el-checkbox>-->
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="nav_right">
          <el-tooltip v-if="user_superAdmin != 1 && !expand" class="item" effect="light" :content="$t('add.add113')"
            placement="bottom">
            <img class="pointer" src="@/assets/img/home/nav_help.png" alt @click="wordorderHandle" />
          </el-tooltip>

          <el-tooltip class="item" effect="light" :content="$t('personPre.pianhao5')" placement="bottom">
            <img style="width: 26px; height: 32px" class="pointer" src="@/assets/img/home/home_lindang.png" alt=""
              @click="messageHandle" />
          </el-tooltip>

          <el-tooltip class="item" effect="light" :content="$t('updateLog.updateLog_9')" placement="bottom">
            <img style="width: 30px; height: 32px" class="pointer" src="@/assets/img/home/laba.png" alt=""
              @click="getShowNoticeData('button')" />
          </el-tooltip>
          <el-popover placement="bottom-start" :visible-arrow="false" trigger="click">
            <!-- //个人中心展示 -->
            <div class="userinfo">
              <div class="top">
                <img :src="user_headUrl ||
                  'http://39.105.32.98/upload/20230418/8817e05ccbde439988e9aadfda3c78be.jpeg'
                  " style="width: 48px; height: 48px; border-radius: 50%" alt="" @click="userClackHandle('avta')" />
                <span class="name">{{ user_realName }}</span>
                <!-- $t("home.home2")普通成员 $t("home.home3")管理员 $t("home.home4")所有者 -->
                <span v-if="user_superAdmin != 1">
                  <span v-if="!expand">
                    <span v-if="user_owner == 1" class="identity">
                      {{ $t('home.home4') }}
                    </span>
                    <span v-else-if="
                      (user_owner != 1 && user_roleId == 1) ||
                      (user_owner != 1 && user_roleId == 2) ||
                      (user_owner != 1 && user_roleId == 4)
                    " class="identity">
                      {{ $t('home.home3') }}
                    </span>
                    <span v-else-if="
                      (user_owner != 1 && user_roleId == 3) ||
                      (user_owner != 1 && user_roleId == 5)
                    " class="identity">
                      {{ $t('home.home2') }}
                    </span>
                  </span>
                </span>
                <span v-if="user_superAdmin == 1">{{ adminRoleName }}</span>
              </div>
              <div class="center">
                <span class="pointer" @click="userClackHandle('setting')">{{
                  $t('home.home5')
                }}</span>
                <span class="pointer" @click="userClackHandle('password')">{{
                  $t('home.home6')
                }}</span>
                <span v-if="user_superAdmin != 1" class="pointer" @click="userClackHandle('message')">
                  {{ $t('home.home7') }}
                </span>
              </div>
              <div class="bottom">
                <!-- <div
                  v-if="user_owner == 1 && user_superAdmin != 1"
                  class="quanxina"
                  @click="(administratorsIsShow = !administratorsIsShow), getMemberList()"
                >
                  {{ $t('home.home8') }}
                </div> -->
                <div class="language">
                  <span class="language_left">{{ $t('home.home9') }}</span>
                  <div class="language_right">
                    
                     <switchLang :isRefresh="true"></switchLang>
               
                    
                    <!-- <span :class="['pointer', language == 'cn' ? 'languageSelected' : 'languageNormal']"
                      @click="languageHandle('cn')">
                      {{ $t('home.home10') }}
                    </span>
                    <span :class="['pointer', language == 'en' ? 'languageSelected' : 'languageNormal']"
                      @click="languageHandle('en')">
                      {{ $t('home.home11') }}
                    </span> -->
                    <!-- <span @click="languageHandle('jp')"
                    :class="['pointer', language == 'jp' ? 'languageSelected' : 'languageNormal']">日</span>-->
                  </div>
                </div>
                <div class="logout pointer" @click="userClackHandle('logout')">
                  {{ $t('home.home12') }}
                </div>
              </div>
            </div>
            <div slot="reference" class="nav_user pointer">
              <div class="nav_user_info">
                <img class="pointer" style="width: 48px; height: 48px; border-radius: 50%; object-fit: cover" alt=""
                  :src="user_headUrl ||
                    'http://39.105.32.98/upload/20230418/8817e05ccbde439988e9aadfda3c78be.jpeg'
                    " @click="userClackHandle('avta')" />
                <div class="nav_user_name">
                  <p>{{ user_realName }}</p>
                  <div v-if="user_superAdmin != 1">
                    <div v-if="!expand">
                      <p v-if="user_owner == 1" class="identity">
                        {{ $t('home.home4') }}
                      </p>
                      <p v-else-if="
                        (user_owner != 1 && user_roleId == 1) ||
                        (user_owner != 1 && user_roleId == 2) ||
                        (user_owner != 1 && user_roleId == 4)
                      " class="identity">
                        {{ $t('home.home3') }}
                      </p>
                      <p v-else-if="
                        (user_owner != 1 && user_roleId == 3) ||
                        (user_owner != 1 && user_roleId == 5)
                      " class="identity">
                        {{ $t('home.home2') }}
                      </p>
                    </div>
                  </div>
                  <div v-if="user_superAdmin == 1">{{ adminRoleName }}</div>
                </div>
              </div>
              <i class="el-icon-arrow-down"></i>
            </div>
          </el-popover>
          <div v-if="messageDialogVisible" class="message">
            <div v-if="messageList.length > 0" class="m-all" style="padding-left: 140px">
              <el-checkbox v-model="messageChecked" @change="alreadyReadAll">
                {{ $t('home.home13') }}
              </el-checkbox>
            </div>
            <div v-if="messageList.length > 0" class="m-list">
              <div v-for="(item, index) in messageList" :key="index" class="message-item">
                <div class="img">
                  <img v-if="item.status == 0" src="@/assets/img/home/weidu.png" alt="" />
                  <img v-if="item.status == 1" src="@/assets/img/home/yidu.png" alt="" />
                </div>
                <div class="i-count" @click="selectOneById(item.id, item.url)">
                  <p class="text" v-show="language === 'cn'">{{ item.content }}</p>
                  <p class="text" v-show="language === 'en'">{{ item.contentEn }}</p>
                  <p class="text" v-show="language === 'pt'">{{ item.contentPt }}</p>
                  <p class="time">{{ item.createDate }}</p>

         
                </div>
              </div>
            </div>
            <div v-if="messageList.length == 0" class="nomessage">{{ $t('home.home14') }}...</div>
          </div>
          <div v-if="messageLength > 0" class="message-num">
            {{ messageLength }}
          </div>
        </div>
      </div>
    </el-header>
    <el-container style="min-height: calc(100% - 80px)">
      <el-aside v-if="isExpand" width="200px" style="padding: 0; margin: 0; height: 100%; overflow-y: auto">
        <el-menu :default-openeds="openeds" :default-active="$route.path" active-text-color="#fff" router
          style="padding: 0; margin: 0">
          <!-- 云平台 -->
          <!-- "member:list"机构成员, "org:setting"机构设置, "parter:list"合作伙伴, "device:list"设备管理, "parter:add"新建 -->
          <div v-if="user_superAdmin != 1">
            <!-- 数据统计 -->
            <el-menu-item v-if="user_roleId != 5" index="/datastatistics">
              <!-- <i class="el-icon-menu"></i> -->
              <template #title>
                <img v-if="$route.path != '/datastatistics'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/shuju.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/shuju-a.png"
                  alt="" />
                <span>{{ $t('routers.data') }}</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/caseorder" :class="{ 'is-active': $route.path === '/caseorder' }"
              :style="{ color: $route.path === '/caseorder' ? '#ffffff' : '#303133' }">
              <!-- <i class="el-icon-document"></i> -->
              <template #title>
                <img v-if="$route.path != '/caseorder'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/anli.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/anli-a.png" alt="" />
                <span>{{ $t('routers.caseOrder') }}</span>
              </template>
            </el-menu-item>
            <!-- 患者管理 -->
            <el-menu-item v-if="organizedType == 1" index="/patient"
              :class="{ 'is-active': $route.path === '/patient' }"
              :style="{ color: $route.path === '/patient' ? '#ffffff' : '#303133' }">
              <template #title>
                <img v-if="$route.path != '/patient'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/huanzhe-a.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/huanzhe.png"
                  alt="" />
                <span>{{ $t('routers.patient') }}</span>
              </template>
            </el-menu-item>
            <!-- 合作伙伴  arr.includes-->
            <!-- v-if="user_permissionsList.includes('parter:list')" -->
            <el-menu-item index="/partner">
              <!-- <i class="el-icon-setting"></i> -->
              <template #title>
                <img v-if="$route.path != '/partner'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/hezuo.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/hezuo-a.png"
                  alt="" />
                <span>{{ $t('routers.partner') }}</span>
              </template>
            </el-menu-item>
            <!-- 机构成员 -->
            <el-menu-item v-if="user_permissionsList.includes('member:list')" index="/organizationmember">
              <template #title>
                <img v-if="$route.path != '/organizationmember'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/jigou.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/jigou-a.png"
                  alt="" />
                <span>{{ $t('routers.members') }}</span>
              </template>
              <!-- <i class="el-icon-setting"></i> -->
            </el-menu-item>
            <!-- 设备管理 -->
            <el-menu-item v-if="user_permissionsList.includes('device:list')" index="/equipmentmanagement">
              <template #title>
                <img v-if="$route.path != '/equipmentmanagement'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/shebei.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/shebei-a.png"
                  alt="" />
                <span>{{ $t('routers.equipmentManagement') }}</span>
              </template>
              <!-- <i class="el-icon-setting"></i> -->
            </el-menu-item>
            <!-- 机构设置 -->
            <el-menu-item v-if="user_permissionsList.includes('org:setting')" index="/organizationstructuring">
              <template #title>
                <img v-if="$route.path != '/organizationstructuring'"
                  style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/shezhi.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/shezhi-a.png"
                  alt="" />
                <span>{{ $t('routers.institutionSetting') }}</span>
              </template>
            </el-menu-item>
          </div>
          <!-- 后台管理 -->
          <div v-if="user_superAdmin == 1">
            <!-- 系统管理 -->
            <el-submenu v-if="user_permissionsList.includes('/systemManagement')" index="/zhiduan">
              <template #title>
                <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-xitong.png" alt="" />
                <span>{{ $t('routers.field') }}</span>
              </template>
              <el-menu-item-group>
                <!-- 工单类型管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/systemManagement')" index="/zhiduan">
                  <template #title>{{ $t('home.home28') }}</template>
                </el-menu-item>
                <!-- 工单管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/systemManagement')" index="/gongdan">
                  <template #title>{{ $t('routers.gongdan') }}</template>
                </el-menu-item>

                <!-- 云平台更新日志 -->
                <el-menu-item v-if="user_permissionsList.includes('/systemManagement')" index="/updateLog">
                  <template #title>{{ $t('home.home27') }}</template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 后台账号管理 -->
            <el-submenu v-if="user_permissionsList.includes('/backAccountManage')" index="/backAccountManage">
              <template #title>
                <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-zhanghao.png" alt="" />
                <span>{{ $t('routers.yonghu') }}</span>
              </template>
              <el-menu-item-group>
                <!-- 角色管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/backAccountManage')" index="/juese">
                  <template #title>{{ $t('home.home16') }}</template>
                </el-menu-item>
                <!-- 账号管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/backAccountManage')" index="/yonghu">
                  <template #title>{{ $t('routers.yonghu') }}</template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 用户账号管理 -->
            <el-submenu v-if="user_permissionsList.includes('/accountManage')" index="/accountManage">
              <template #title>
                <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-yonghu.png" alt="" />
                <span>{{ $t('home.home31') }}</span>
              </template>
              <el-menu-item-group>
                <!-- 诊所管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/accountManage')" index="/zhensuo">
                  <template #title>{{ $t('home.home17') }}</template>
                </el-menu-item>
                <!-- 技工所管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/accountManage')" index="/jigongsuo">
                  <template #title>
                    {{ $t('home.home18') }}
                  </template>
                </el-menu-item>
                <!-- Dentallmage 账号管理 -->
                <el-menu-item v-if="
                  user_permissionsList.includes('/accountManage') &&
                  $config.type === 'currVersion'
                " index="/dentalImageUser">
                  <template #title>
                    {{ $t('home.home26') }}
                  </template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- 容量管理 -->
            <el-menu-item v-if="user_permissionsList.includes('/rongliang')" index="/rongliang"
              :class="{ 'is-active': $route.path === '/rongliang' }"
              :style="{ color: $route.path === '/rongliang' ? '#ffffff' : '#303133' }">
              <template #title>
                <img v-if="$route.path != '/rongliang'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/z-rongliang.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-rongliang-a.png"
                  alt="" />
                <span>{{ $t('routers.rongliang') }}</span>
              </template>
            </el-menu-item>
            <!-- 设备管理 -->
            <el-menu-item v-if="user_permissionsList.includes('/equipmentmanagement')" index="/equipmentmanagement"
              :class="{ 'is-active': $route.path === '/equipmentmanagement' }"
              :style="{ color: $route.path === '/equipmentmanagement' ? '#ffffff' : '#303133' }">
              <template #title>
                <img v-if="$route.path != '/equipmentmanagement'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/z-shebei.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-shebei-a.png"
                  alt="" />
                <span>{{ $t('routers.equipmentManagement') }}</span>
              </template>
              <!-- <i class="el-icon-setting"></i> -->
            </el-menu-item>

            <!-- 客户端软件管理 -->
            <el-submenu v-if="user_permissionsList.includes('/versionManage')" index="/versionManage">
              <template #title>
                <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-xitong.png" alt="" />
                <span>{{ $t('routers.router1') }}</span>
              </template>
              <el-menu-item-group>
                <!-- 软件版本管理 -->
                <el-menu-item v-if="user_permissionsList.includes('/versionManage')" :index="$config.type === 'currVersion'
                  ? '/versionManagement_currVersion'
                  : 'versionManagement_oem'
                  ">
                  <template #title>{{ $t('routers.router2') }}</template>
                </el-menu-item>
                <!-- 软件升级日志 -->
                <el-menu-item v-if="user_permissionsList.includes('/versionManage')" index="/versionLogManagement">
                  <template #title>{{ $t('routers.router3') }}</template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>


            <!-- 客户端升级包 -->
            <el-submenu v-if="user_permissionsList.includes('/clientInstallationPackage')"
              index="/clientInstallationPackage">
              <template #title>
                <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-xitong.png" alt="" />
                <span>{{ $t('home.home32') }}</span>
              </template>
              <el-menu-item-group>
                <!-- 软件升级包版本 -->
                <el-menu-item v-if="user_permissionsList.includes('/clientInstallationPackage')"
                  index="/clientUpgradeVersion">
                  <template #title>{{ $t('routers.version') }}</template>
                </el-menu-item>
                <!-- 软件升级日志 -->
                <el-menu-item v-if="user_permissionsList.includes('/clientInstallationPackage')"
                  index="/clientUpgradeLog">
                  <template #title>{{ $t('routers.versionLog') }}</template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <!-- 订单管理（订单文件下载） -->
            <el-menu-item v-if="user_permissionsList.includes('/orderManagement')" index="/orderManagement"
              :class="{ 'is-active': $route.path === '/orderManagement' }"
              :style="{ color: $route.path === '/orderManagement' ? '#ffffff' : '#303133' }">
              <template #title>
                <img v-if="$route.path != '/orderManagement'" style="width: 20px; height: 20px; margin-right: 8px"
                  src="@/assets/img/z-order.png" alt="" />
                <img v-else style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-order-a.png"
                  alt="" />
                <span>{{ $t('routers.orderManage') }}</span>
              </template>
            </el-menu-item>

            <!-- 客户端数据统计 -->
            <el-submenu v-if="user_permissionsList.includes('/dataStatistics')" index="/dataStatistics">
              <template #title>
                <img style="width: 20px; height: 20px; margin-right: 8px" src="@/assets/img/z-xitong.png" alt="" />
                <span>{{ $t('home.home33') }}</span>
              </template>
              <el-menu-item-group>
                <!-- 口扫 -->
                <el-menu-item v-if="user_permissionsList.includes('/dataStatistics')" index="/oralScan">
                  <template #title>{{ $t('routers.oralScan') }}</template>
                </el-menu-item>
                <!-- 桌扫 -->
                <el-menu-item v-if="user_permissionsList.includes('/dataStatistics')" index="/tableSweeper">
                  <template #title>{{ $t('routers.tableSweeper') }}</template>
                </el-menu-item>
                <!-- Dentallmage -->
                <el-menu-item v-if="user_permissionsList.includes('/dataStatistics')" index="/Dentallmage">
                  <template #title>{{ $t('routers.dentallmage') }}</template>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>

        <div class="noti pointer" @click="notiHandle">
          <div class="title">
            <img src="@/assets/img/main_noti.png" alt />
            <span>{{ $t('home.home19') }}</span>
          </div>
          <div class="noti_content">
            <div class="item">
              <span class="dot"></span>
              <span class="text">{{
                messageNoticeArr.length > 0 ? messageNoticeArr[0].title : ''
              }}</span>
            </div>
          </div>
        </div>
      </el-aside>
      <el-main style="height: calc(100vh - 80px); overflow: auto">
        <router-view />
      </el-main>
    </el-container>
    <el-dialog width="50%" :title="$t('home.home20')" :visible.sync="administratorsIsShow" append-to-body
      :close-on-click-modal="false">
      <el-select v-model="administrators" style="width: 300px" clearable filterable allow-create
        :placeholder="$t('home.home21')">
        <el-option v-for="item in memberList" :key="item.id" :label="item.realName" :value="item.id" />
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="administratorsIsShow = false">{{ $t('home.home22') }}
        </el-button>
        <el-button size="small" type="primary" @click="transferMemberRole()">{{ $t('home.home23') }}
        </el-button>
      </div>
    </el-dialog>
    <el-dialog width="60%" :title="$t('updateLog.updateLog_9')" :visible.sync="noticeVisible" append-to-body
      :show-close="false" :close-on-click-modal="false" @closed="noticeClose()">
      <div slot="title">
        <div class="dialog_head">
          <span>{{ $t('updateLog.updateLog_9') }}</span>
          <img src="@/assets/img/icon/close_2.png" @click="noticeVisible = false" />
        </div>
      </div>
      <notice :list="noticeList" />
      <div slot="footer" class="dialog-footer">
        <el-checkbox v-model="isNoticePrompt">{{ $t('updateLog.updateLog_10') }}</el-checkbox>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import switchLang from '@/components/lang/index';  // 全局切换语言组件
import Cookies from 'js-cookie';
import notice from '@/components/notice/index.vue';
import { formatDate } from '@/utils/index';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Home',

  data() {
    return {
      // 个人中心展示
      userShow: false,
      // 消息展示
      messageShow: false,

      language: 'cn',
      menuList: [
        { icon: '', title: '数据统计', selectedIcon: '', selected: false },
        { icon: '', title: '案例订单', selectedIcon: '', selected: false },
        {
          icon: '',
          title: this.$t('add.add181'),
          selectedIcon: '',
          selected: false,
        },
        {
          icon: '',
          title: this.$t('add.add182'),
          selectedIcon: '',
          selected: false,
        },
        {
          icon: '',
          title: this.$t('add.add024'),
          selectedIcon: '',
          selected: false,
        },
        { icon: '', title: '机构设置', selectedIcon: '', selected: false },
      ],
      form: {
        origination: '',
      },
      circleUrl: '',
      messageNoticeArr: [], // 广告通知
      optionLabelList: [], // 活动区域数据
      user_organizedRoleId: '', // 权限id
      user_superAdmin: '', // 用户角色 后期更改
      user_realName: '', // 用户名称 后期更改
      user_headUrl: '', // 图片地址
      user_roleId: '', // 权限id
      messageDialogVisible: false, // 消息
      messageList: [], // 消息数据
      messageNum: '', // 未读数量
      messageChecked: false, // 全部已读
      memberList: [], // 管理员
      administratorsIsShow: false,
      administrators: '',
      messageLength: 0,
      user_owner: null,
      organizedType: null,
      user_permissionsList: [],
      isExpand: true,
      expand: false,
      adminRoleName: '',
      openeds: ['/zhiduan', '/juese', '/zhensuo', '/jigongsuo'],
      canClickLogo: false,
      currentDept: {},

      noticeVisible: false,
      isNoticePrompt: false,
      noticeList: [],
    };
  },

  components: {
    notice,
    switchLang,
  },
  created() {
    // 调用弹框接口
    this.getShowNoticeData();
    this.getMessageNotice();
    this.getMessageList();
    // this.getNoMessageList()
    this.$EventBus.$on('refreshInstitution', () => {
      this.getOptionLabel();
    });
  },
  mounted() {
    if (localStorage.getItem('lang')) {
      this.language = localStorage.getItem('lang');
    }
    if (localStorage.getItem('logoClick')) {
      this.canClickLogo = localStorage.getItem('logoClick') === '1';
    }
    console.log(this.canClickLogo);
    this.expand = Boolean(localStorage.getItem('tg_expand'));
    this.isExpand = !this.expand;
    if (localStorage.getItem('jion_juese')) {
      this.expand = Boolean(localStorage.getItem('tg_expand'));
      this.isExpand = !this.expand;
    }
    this.user_roleId = window.localStorage.getItem('user_roleId');
    this.user_organizedRoleId = window.localStorage.getItem('user_organizedRoleId');
    // this.user_superAdmin = window.localStorage.getItem("user_superAdmin")
    this.user_realName = window.localStorage.getItem('user_realName');
    this.user_headUrl = window.localStorage.getItem('user_headUrl');
    this.user_superAdmin = localStorage.getItem('user_superAdmin');
    this.user_owner = localStorage.getItem('user_owner'); // 1为所有者
    this.organizedType = localStorage.getItem('user_organizedType'); // 1诊所 2技工所
    this.user_permissionsList = localStorage.getItem('user_permissionsList');
    this.adminRoleName = localStorage.getItem('user_adminRoleName');
    if (this.user_superAdmin != 1) {
      this.getOptionLabel();
    }
  },
  methods: {
    getShowNoticeData(button) {
      // if (localStorage.getItem('user_superAdmin') == 1) {
      //   return false;
      // }

      this.$http({
        method: 'get',
        url: '/cloudplatformlogcontent/updateLogReminder', //后端接口

        params: {
          timeZone: this.$timeZone,
          userTime: formatDate(new Date(), 'second'),
          button,
        },
      })
        .then(({ data: res }) => {
          this.noticeList = res.data.list;
          this.noticeList.map((m) => (m['isSelect'] = false));
          this.noticeList[0].isSelect = true;

          if (this.$route.path !== '/caseOrderDetail') {
            // 下单页面不出现公告
            if (res.data.status === 1) {
              this.noticeVisible = true;
            } else if (res.data.status === 0) {
              this.noticeVisible = false;
            }
          }
        })
        .catch((err) => { });
    },
    noticeClose() {
      if (this.isNoticePrompt) {
        this.$http({
          method: 'post',
          url: 'cloudplatformlogcontent/saveUserNoticerelationship', //后端接口

          data: {
            userId: window.localStorage.getItem('user_id'),
            userName: window.localStorage.getItem('user_realName'),
            versionNumber: this.noticeList.length > 0 ? this.noticeList[0].versionNumber : '',
          },
        }).then(({ data: res }) => {
          console.log('res-', res);
        });
      }
    },

    // 个人中心展示或消失
    userShowHandle() {
      this.userShow = true;
    },
    userHiddenHandle() {
      this.userShow = false;
    },
    // 个人中心
    userClackHandle(type) {
      if (type == 'avta') {
        // 头像点击
      } else if (type == 'setting') {
        // 账户设置点击
        this.$router.push('/person');
      } else if (type == 'password') {
        this.$router.push('/account');
        // 修改密码点击
      } else if (type == 'message') {
        this.$router.push('/preference');
        // 提醒设置点击
      } else if (type == 'logout') {
        // 退出登录点击
        this.$http
          .post('/open/logout')
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            window.localStorage.removeItem('user_headUrl');
            window.localStorage.removeItem('user_realName');
            window.localStorage.removeItem('user_superAdmin');
            window.localStorage.removeItem('user_organizedRoleId');
            window.localStorage.removeItem('user_organizedType');
            window.localStorage.removeItem('user_roleId');
            window.localStorage.removeItem('user_jg_id');
            window.localStorage.removeItem('user_owner');
            window.localStorage.removeItem('user_permissionsList');
            window.localStorage.removeItem('user_id');
            window.localStorage.removeItem('user_name');
            window.localStorage.removeItem('user_roleId');
            window.localStorage.removeItem('user_organizedType');
            window.localStorage.removeItem('user_adminRoleName');
            window.localStorage.removeItem('tg_expand');
            // window.localStorage.removeItem('lang');
            Cookies.set('token', '', -1);

            this.$router.push('/');
          })
          .catch((err) => {
            console.log('err', err);
          });
      }
    },
    judgeShowBullet() {
      let user_id = window.localStorage.getItem('user_id');
      let deptId = window.localStorage.getItem('user_jg_id');
      let user_superAdmin = window.localStorage.getItem('user_superAdmin');

      let user_owner = window.localStorage.getItem('user_owner');
      let ignoreArrs = ['/login', '/threeLoad', '/register', '/selectionregister', '/selectionnextregister', '/mobileTerminal'];
      if (ignoreArrs.indexOf(this.$route.path) !== -1) {
        return false;
      }
      if (user_superAdmin === '1') {
        return false;
      }
      if (!user_owner || user_owner === 'null') {
        return false;
      }
      if ((user_id && user_id == 1) || !user_id || user_id === 'null') {
        return false;
      }
      if (!deptId) {
        return false;
      }


      this.$http
        .get(`/sys/organized/authentication?userId=${user_id}&deptId=${deptId}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (res.data.Owner && Number(user_owner) != res.data.Owner) {

              // 说明状态改变了
              let alert = this.$alert(
                this.$t('members.chengyuan77'),
                this.$t('members.chengyuan38'),
                {
                  confirmButtonText: this.$t('members.chengyuan31'),
                  callback: (action) => {
                    this.logOut();
                    if (this.alerts && this.alerts.length > 0) {
                      this.alerts.forEach((item) => {
                        item.close();
                      });
                    }

                  },
                },
              );
              this.alerts.push(alert);
            } else {
              if (this.alerts && this.alerts.length > 0) {
                this.alerts.forEach((item) => {
                  item.close();
                });
              }

            }
            // 
            if (res.data.CurrentLoginStatus === false) {
              let alert_dissolution = this.$alert(
                `${this.$t('members.chengyuan79')}
                  ${res.data.OwnerName}${this.$t('members.chengyuan80')}
                  【${res.data.OwnerDeptName}】
                  ${this.$t('members.chengyuan81')}`,
                this.$t('members.chengyuan38'),
                {
                  confirmButtonText: this.$t('members.chengyuan31'),
                  callback: (action) => {
                    this.logOut();
                    if (this.alert_dissolution && this.alert_dissolution.length > 0) {
                      this.alert_dissolution.forEach((item) => {
                        item.close();
                      });
                    }

                  },
                },
              );
              this.alert_dissolution.push(alert_dissolution);
            } else {
              if (this.alert_dissolution && this.alert_dissolution.length > 0) {
                this.alert_dissolution.forEach((item) => {
                  item.close();
                });
              }

            }
          }
        })
        .catch((err) => {
          console.log('err', err);
        }).finally(() => {
          clearTimeout(this.ownerSatateTime);
          this.ownerSatateTime = setTimeout(this.judgeShowBullet, 1000 * 10);
        });
    },
    logOut() {
      this.$http
        .post('/open/logout')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          window.localStorage.removeItem('user_headUrl');
          window.localStorage.removeItem('user_realName');
          window.localStorage.removeItem('user_superAdmin');
          window.localStorage.removeItem('user_organizedRoleId');
          window.localStorage.removeItem('user_organizedType');
          window.localStorage.removeItem('user_roleId');
          window.localStorage.removeItem('user_jg_id');
          window.localStorage.removeItem('user_owner');
          window.localStorage.removeItem('user_permissionsList');
          window.localStorage.removeItem('user_id');
          window.localStorage.removeItem('user_name');
          window.localStorage.removeItem('user_roleId');
          window.localStorage.removeItem('user_organizedType');
          window.localStorage.removeItem('user_adminRoleName');
          window.localStorage.removeItem('tg_expand');
          // window.localStorage.removeItem('lang');
          Cookies.set('token', '', -1);

          this.$router.push('/');
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    checkOwnerSatate() {
      this.judgeShowBullet();
    },
    getOptionLabel() {
      let isCurrentDept = false;
      this.$http
        .get('/sys/organized/getOptionLabel')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.optionLabelList = res.data;
            this.optionLabelList.forEach((item) => {
              // 有机构上传logo
              if (item.currentDept) {
                this.currentDept = item;
                isCurrentDept = true;
                this.$nextTick(() => {
                  this.form.origination = item.id;
                  this.user_roleId = item.roleId;
                  this.user_owner = item.owner; // 1为所有者
                  this.user_permissionsList = item.permissionsList;
                  this.organizedType = item.organizedType; // 1诊所 2技工所
                  window.localStorage.setItem('user_roleId', item.roleId);
                  window.localStorage.setItem('user_jg_id', item.id);
                  localStorage.setItem('user_owner', item.owner);
                  localStorage.setItem('user_permissionsList', item.permissionsList);
                  localStorage.setItem('user_organizedType', item.organizedType);

                  this.optionLabelList.forEach((item) => {
                    if (item.id == this.form.origination) {
                      window.localStorage.setItem('user_organizedRoleId', item.roleId);
                      window.localStorage.setItem('user_roleId', item.roleId);
                      localStorage.setItem('user_owner', item.owner);
                      localStorage.setItem('user_organizedType', item.organizedType);
                      localStorage.setItem('user_roleId', item.roleId);
                      localStorage.setItem('user_jg_id', item.id);
                      localStorage.setItem('user_permissionsList', item.permissionsList);
                      localStorage.setItem('user_deptId', item.deptId);
                      localStorage.setItem('user_auditReportState', item.auditReportState);
                      if (item.realName) {
                        localStorage.setItem('user_realName', item.realName);
                      }
                      if (item.superAdmin) {
                        localStorage.setItem('user_superAdmin', item.superAdmin);
                      }
                    }
                  });
                  this.checkOwnerSatate();
                });
              }
            });

            if (!isCurrentDept) {
              this.selectChange(this.optionLabelList[0].id);
            }
          
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },

    // 切换机构
    selectChange(val) {
      if(!val){
        return false;
      }
      sessionStorage.setItem('hcyl_page', 1);
      const form = {
        id: val,
      };

      this.optionLabelList.forEach((item) => {
        if (item.id == val) {
          form.roleId = item.roleId;
          window.localStorage.setItem('user_organizedRoleId', item.roleId);
          form.organizedType = item.organizedType;
          window.localStorage.setItem('user_roleId', item.roleId);
          localStorage.setItem('user_owner', item.owner);
          localStorage.setItem('user_organizedType', item.organizedType);
          localStorage.setItem('user_roleId', item.roleId);
          localStorage.setItem('user_jg_id', item.id);
          localStorage.setItem('user_permissionsList', item.permissionsList);
          localStorage.setItem('user_deptId', item.deptId);
          localStorage.setItem('user_auditReportState', item.auditReportState);
          // localStorage.setItem("user_id", item.userId)
          if (item.realName) {
            localStorage.setItem('user_realName', item.realName);
          }
          if (item.superAdmin) {
            localStorage.setItem('user_superAdmin', item.superAdmin);
          }
        }
      });
      this.$http
        .post('/open/changeUserOrganize', form)
        .then(({ data: res }) => {
        
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            if (
              localStorage.getItem('user_owner') != 1 &&
              localStorage.getItem('user_organizedRoleId') == 5
            ) {
              this.$router.push('/caseorder');
            } else {
              this.$router.push('/home');
            }
            setTimeout(() => {
              location.reload();
            }, 100);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
   
    wordorderHandle() {
      // 工单点击
      this.$router.push('/workorder');
    },
    messageHandle() {
      // 消息点击
      // this.$router.push('/message')
      this.messageDialogVisible = !this.messageDialogVisible;
    },
    // 获取消息
    getMessageList() {
      this.messageLength = 0;
      this.$http
        .get('/messageNotice/messageList')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.messageList = res.data.list;
            res.data.list.forEach((item) => {
              if (item.status == 0) {
                this.messageLength++;
              }
            });
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 查看单条消息通知
    selectOneById(id, url) {
      console.log(id, url, 'id, url');
      this.$http
        .post(`/messageNotice/set?id=${id}&status=1`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('home.home25'));
            this.getMessageList();
            this.messageDialogVisible = false;
            // if (url) {
            //   setTimeout(() => {
            //     // this.$router.push(url);

            //   }, 500);
            // }
            setTimeout(() => {
              if (url) {
                this.$router.push(url);
              } else {
                this.$router.push('/caseorder');
              }
            }, 500);
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 全部已读
    alreadyReadAll() {
      this.$http
        .post('/messageNotice/alreadyReadAll')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.$message.success(this.$t('home.home24'));
            this.getMessageList();
            this.messageDialogVisible = false;
            this.messageChecked = false;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    notiHandle() {
      // 通知点击
      this.$router.push('/notification');
    },
    // 广告通知
    getMessageNotice() {
      this.$http
        .get('/messageNotice/selectIndex')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.messageNoticeArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 未读数量
    // getNoMessageList() {
    //     this.$http.get("/messageNotice/messageList").then(({ data: res }) => {
    //         if (res.code !== 0) {
    //             return this.$message.error(res.msg)
    //         } else {
    //             this.messageNum = res.data.total
    //         }
    //     }).catch((err) => {
    //         console.log("err", err)
    //     })
    // },
    // 消息通知
    getMessageNotification() {
      this.$http
        .get('/messageNotice/selectIndex')
        .then(({ data: res }) => {
          console.log('res--->', res);
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.messageNoticeArr = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 拿管理员
    getMemberList() {
      this.$http
        .get('/sys/organized/getMemberList?type=0')
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          } else {
            this.memberList = res.data;
          }
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    transferMemberRole() {
      if (this.administrators === '') {
        this.$message.warning(this.$t('home.home21'));
        return;
      }
      let organizedType;
      let count = 0;
      this.memberList.forEach((item) => {
        count++;
        if (item.id == this.administrators) {
          organizedType = item.organizedType;
        }
      });
      if (count == this.memberList.length) {
        this.$http
          .post('/sys/organized/transferMemberRole', {
            userDeptRoleId: this.administrators,
            organizedType: organizedType,
          })
          .then(({ data: res }) => {
            console.log('res--->', this.administrators, res);
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            } else {
              this.$message.success('转让成功');
              this.$router.push('/login');
            }
          })
          .catch((err) => {
            console.log('err', err);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.homeView {
  width: 100vw;
  height: 100vh;
  // position: relative;
}

.noti {
  margin-top: 100px;
  //消息通知样式
  background: rgba(245, 245, 245, 0.39);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 1;
  border-radius: 12px;
  padding: 20px;

  .title {
    img {
      width: 20px;
      height: 16px;
    }

    span {
      margin-left: 5px;
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      color: #333333;
    }
  }

  .noti_content {
    margin-top: 6px;
    max-height: 100px;
    overflow: hidden;

    .item {
      margin-top: 4px;
      display: flex;
      align-items: center;

      .dot {
        width: 4px;
        height: 4px;
        background: rgba(227, 60, 60, 1);
        border-radius: 50%;
        opacity: 1;
      }

      .text {
        margin-left: 5px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: #666666;
      }
    }
  }
}

.el-header {
  background-color: white;
  color: #333;
  // text-align: center;
}

.el-aside {
  background-color: white;
  color: #333;
  text-align: center;

  // line-height: 200px;
  .el-menu {
    border: none;
  }
}

.el-main {
  background-color: #f8f8f8;
  // color: #333;
  text-align: left;
  // line-height: 160px;
  // padding: 25px;
}

// .el-container {
//     height: 100%;
// }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;

  .nav_left {
    display: flex;
    align-items: center;

    img {
      width: 174px;
      height: 73px;
    }

    .nav_origination {
      // background-color: red;
      margin-left: 18px;
    }
  }

  .nav_right {
    display: flex;
    align-items: center;
    position: relative;

    img {
      margin-right: 26px;
      width: 30px;
      height: 30px;
    }

    .nav_user {
      display: flex;
      align-items: center;

      .nav_user_info {
        display: flex;
        align-items: center;

        .nav_user_name {
          margin-left: -6px;
          margin-right: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;

          p:nth-child(1) {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 20px;
            color: #333333;
            opacity: 1;
          }

          p:nth-child(2) {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 17px;
            color: #999999;
            opacity: 1;
          }
        }
      }
    }

    .message {
      width: 280px;
      min-height: 200px;
      max-height: 300px;
      // overflow: auto;
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: 30px;
      padding-bottom: 20px;
      box-sizing: border-box;
      position: absolute;
      left: -180px;
      top: 42px;
      z-index: 999;
      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
      border-radius: 6px;

      .m-all {
        width: 100%;
        background: #fff;
        margin-top: -10px;
        padding-bottom: 6px;
      }

      .m-list {
        width: 100%;
        flex: 1;
        overflow: auto;
      }

      .nomessage {
        width: 100%;
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .message-item {
        width: 100%;
        display: flex;
        margin-bottom: 16px;

        .img {
          width: 30px;
          height: 30px;
          margin-right: 6px;
          // margin-left: -10px;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .i-count {
          flex: 1;
          width: 100%;
          cursor: pointer;
          padding-right: 30px;
          box-sizing: border-box;

          .text {
            width: 100%;
            line-height: 20px;
            word-wrap: break-word;
          }
        }
      }
    }

    .message-num {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #e33c3c;
      color: #fff;
      font-size: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 72px;
      top: 0px;
    }
  }
}

.userinfo {
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    background: rgba(0, 62, 103, 0.2);

    .name {
      margin-top: 8px;
      font-size: 14px;
      line-height: 20px;
      color: #333333;
      font-weight: 400;
    }

    .identity {
      margin-top: 6px;
      font-size: 12px;
      line-height: 17px;
      color: #999999;
      font-weight: 400;
    }
  }

  .center {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0px 20px;
    border-bottom: 1px solid #eff0f2;

    span {
      font-size: 14px;
      line-height: 20px;
      color: #333333;
      margin-bottom: 20px;
    }
  }

  .bottom {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;

    .quanxina {
      cursor: pointer;
      margin-bottom: 20px;
    }

    .language {
      display: flex;
      align-items: center;

      // .language_left {}

      .language_right {
        margin-left: 18px;
        display: flex;
        align-items: center;
        padding: 10px 30px;
        background: rgb(235 235 235 / 50%);
        span {
          padding: 4px 8px;
          margin-left: 12px;
          font-size: 14px;
          line-height: 20px;
          color: #333333;
        }

        .languageSelected {
          background: rgba(0, 62, 103, 0.1);
          color: #003e67;
        }

        .languageNormal {
          background: transparent;
          color: #333333;
        }
      }
    }

    .logout {
      margin-top: 20px;
      font-size: 14px;
      line-height: 20px;
      color: #ea4f3d;
    }
  }
}

.el-menu-item.is-active {
  background-color: #003e67 !important;
}

::v-deep .select-style .el-input__inner {
  padding-left: 40px;
}

.dialog_head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  span {
    font-size: 20px;
    font-weight: bolder;
  }

  img {
    cursor: pointer;
  }
}

/* 反转收缩图标 */
::v-deep .el-submenu__icon-arrow {
  transform: rotate(180deg);
}

::v-deep .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
  transform: rotate(0deg);
}

::v-deep .el-submenu__title {
  text-align: left;
}

::v-deep .el-menu-item {
  text-align: left;
}
</style>
